<template>
  <h2>当前求和为: {{ sum }}</h2>
  <button @click="sum++">点我加1</button>
  <hr />
  <h2>当前的信息为: {{ msg }}</h2>
  <button @click="msg += '!'">点我加1</button>
  <hr />
  <h2>姓名:{{ person.name }}</h2>
  <h2>年龄:{{ person.age }}</h2>
  <h2>薪资:{{ person.job.j1.salary }}K</h2>
  <button @click="person.name += '~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import { ref, watch } from "vue"; // ref处理基本类型数据  reactive处理引用类型数据
export default {
  name: "demo",
  setup() {
    // 数据
    let sum = ref(0);
    let msg = ref("hello");
    let person = ref({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    console.log(sum);
    console.log(msg);
    console.log(person);

    // 注意:这里不能写成watch(sum.value,(a,b)=>{}),因为sum是基本类型数据，所以不能.value
    watch(sum, (newVal, oldVal) => {
      console.log("sum的值变了", "newVal===", newVal, "oldVal===", oldVal);
    });

    // 方法一
    // watch(person.value, (newVal, oldVal) => {
    //   console.log("person的值变了", "newVal===", newVal, "oldVal===", oldVal);
    // });

    // 方法二
    watch(person,(newVal,oldVal)=>{
      console.log("person的值变了", "newVal===", newVal, "oldVal===", oldVal)
    },{deep:true})

    return {
      sum,
      msg,
      person
    };
  },
};
</script>


